@mixin statusg {
  position: relative;
  width: 100%;
  // border: 1px solid #02246C;
  // background-color: #040f66;
  // white-space: nowrap;
  overflow: hidden;
  // text-overflow: ellipsis;
  // margin: 0 auto;
  box-shadow: 0 0 0 1px #2e4378, inset 0 0 10px #02246C;
  margin: 10px 0px;
  display: flex;
  flex-direction: column;

  .top {
    width: 100%;
    // background-color: #040f52;
    background: url('../../assets/images/titled.png') no-repeat center;
    background-size: contain;
    // padding: 15px;
    // padding-bottom: 15px;
    box-sizing: border-box;
    padding-top: 3px;
    height: 43px;
    font-size: 26px;
    font-weight: 700;
    text-align: center;

    span {
      // text-shadow: 1px 2px 8px rgb(255 255 255 / 100%);
      background-image: linear-gradient(to top, #7BE8FF, #FFFFFF, #7BE8FF);
      -webkit-background-clip: text;
      color: transparent
    }

    .icon_top_ti {
      width: 10px;
      height: 10px;
      display: inline-block;
      margin-left: 10px;
      margin-right: 10px;
      border: 1px solid #fff;
      background-color: #fff;
      box-shadow: 0 2px 8px 0 rgb(255 255 255 / 100%);
      transform: rotate(45deg);
    }

    .icon_top {
      width: 10px;
      height: 10px;
      display: inline-block;
      margin-left: 10px;
      margin-right: 10px;
      border: 1px solid #fff;
      box-shadow: 0 2px 8px 0 rgb(255 255 255 / 100%);
      transform: rotate(45deg);
    }
  }
}

.my_table ::v-deep.el-table {
  // 去掉table的border start----------------------------
  border: 0;

  th,
  tr,
  td {
    border: 0;
  }

  &::before {
    height: 0px;
  }

  &::after {
    width: 0;
  }

  .el-table__fixed:before {
    height: 0;
  }

  // 去掉table的border end----------------------------
}

.my_table ::v-deep.el-table__body-wrapper {
  background-color: #010339;
}

.my_table ::v-deep.el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  background-color: rgba($color: #2e4378, $alpha: 1);
}

.my_table ::v-deep.gutter {
  background-color: rgba($color: #2e4378, $alpha: 1);
}

.my_table ::v-deep.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: rgba($color: #fff, $alpha: 0.4);
}

//宽度问题解决，关键部分
.my_table ::v-deep.el-table colgroup col[name='gutter'] {
  width: 6px;
}

.my_table ::v-deep.el-table__body {
  width: 100% !important;
}

.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);

  filter: grayscale(100%);

  filter: gray;
}

.datebottom {
  height: 3vh;
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  font-size: calc(100vw * 18/ 1920);
  font-weight: bold;
  background: url('../../assets/images/bibottom.png') no-repeat;
  background-size: contain;
}

@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


@mixin hqfun {
  background-size: contain;
  width: 134px;
  height: 134px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

@mixin xq {
  background-size: contain;
  border-radius: 50%;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: rotate 1.5s linear infinite;
  animation: rotate 1.5s linear infinite;
}

.hq {
  background: url('../../assets/images/bixq.png') no-repeat;
  @include hqfun();

  // .fdnr {}
  .loader {
    // border-width: 0.25rem;
    background: url('../../assets/images/bixqnb.png') no-repeat;
    @include xq();
  }

  .loader_therr {
    background: url('../../assets/images/bixqsan.png') no-repeat;
    @include xq();
  }
}

.hq_two {
  background: url('../../assets/images/bixq_two.png') no-repeat;
  @include hqfun();

  .loader_two {
    // border-width: 0.25rem;
    background: url('../../assets/images/bixqnb_two.png') no-repeat;
    @include xq();
  }
}

.map_position {
  pointer-events: none;
  position: absolute;
  right: -5px;
  bottom: 0px;
  transform: scale(0.85);
  display: flex;
  align-items: flex-end;
}

.map_router {
  // float: left;
  // padding: 20px;
  padding-bottom: 5px;
  // background-color: rgba($color: #000, $alpha: 0.5);

  .router_flex {
    margin-bottom: 5px;
    padding: 10px;
    min-width: 235px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: url('../../assets/images/biadmin.png') no-repeat;
    background-size: contain;

    .xian {
      // display: inline;
      width: 22px;
      height: 18px;
      margin: 0 5px;
      background: url('../../assets/images/sfz01.png') no-repeat;
      background-size: cover;
    }
  }


}

.map_position_two {
  pointer-events: auto;
  // float: left;
  padding: 20px;
  margin-left: 10px;
  background: url('../../assets/images/biddy.png') no-repeat;
  background-size: contain;
  // background-color: rgba($color: #000, $alpha: 0.5);
}

.map_hezi {
  flex: 2;
  padding: 5px 10px;
  position: relative;
  margin-bottom: 10px;
}

.map_top_sx {
  position: absolute;
  top: 10vh;
  left: 40%;
  z-index: 1;
}

.map_tophe {
  // height: 5vh;
  position: absolute;
  top: 15px;
  left: 27%;
  z-index: 1;
}

.map_hezi_sx {
  position: fixed;
  top: 0px;
  width: 100vw;
  height: 100vh;
  left: 0px;
  z-index: 9999;
}

.map_body {
  width: 100%;
  height: 100%;

  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px;
    height: 8px;
    /*高宽分别对应横竖滚动条的尺寸*/
  }

  ::-webkit-scrollbar-track {
    background-color: rgba($color: #0f2d74, $alpha: 0);
  }

  ::-webkit-scrollbar-thumb {
    // background: rgb(0, 0, 0, 0.5);
    background: #62DAF4;
    border-radius: 25px;
  }
}

.body_fangda {
  cursor: pointer;
  position: absolute;
  z-index: 3;
  top: 10%;
  right: 30px;
  background-color: rgba($color: #0f2d74, $alpha: 0);
  // border-color: #5caddf;
  color: #fff;
}


.bi_body {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('../../assets/images/bg.png') no-repeat fixed center;
  // background: #01032d;
  color: #fff;

  .left_img_top {
    position: absolute;
    top: -3px;
    z-index: 1;
    left: -3px;
  }

  .right_img_top {
    position: absolute;
    top: -3px;
    z-index: 1;
    right: -3px;
  }

  .left_img_bottom {
    position: absolute;
    bottom: -3px;
    z-index: 1;
    left: -3px;
  }

  .right_img_bottom {
    position: absolute;
    bottom: -3px;
    z-index: 1;
    right: -3px;
  }

  .customColor ::v-deep.el-progress-bar__inner {
    background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  }

  .cont_hezi {
    width: 48%;
    // width: 235px;
    height: 13vh;
    padding: 10px;
    // background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
    // background-color: #06076B;
    background: rgba($color: #1F4987, $alpha: 0.37);
    border: 1px solid #3573FC;

    position: relative;
    float: left;
    color: #fff;
    font-size: calc(100vw * 22/ 1920);
    font-weight: 400;
    z-index: 1;
    // display: flex;
    // justify-content: space-around;
    // flex-direction: column;


    .leftimgs {
      float: left;
      background-size: cover !important;
      margin-right: 15px;
      width: 48%;
      height: 80%;
      position: relative;

      .ab_ponition {
        width: 92%;
        height: 95%;
        position: absolute;
        top: -9%;
        left: 5%;
        z-index: -1
      }
    }
  }

  .bi_top_fd {
    pointer-events: none;
    position: absolute !important;
    left: 0px;
    top: 0px;
    z-index: 10000;
    width: 100vw;
  }

  .bi_top {
    padding: 10px 20px;
    box-sizing: border-box;
    height: 10vh;
    background: url('../../assets/images/bitopd.png') no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    position: relative;

    .bi_topbtn {
      position: absolute;
      top: 30px;
      left: 67%;
      background-color: rgba($color: #0f2d74, $alpha: 0);
      border-color: #5caddf;
      color: #5caddf;
    }

    .returnclass {
      cursor: pointer;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      left: 0px;
      bottom: 0px;
      width: 27vw;
      height: 6vh;
      background: url('../../assets/images/d.png') no-repeat;
      background-size: cover;

      span {
        font-size: 22px;
        font-weight: 700;
        color: #fff;
      }
    }

    .dateright {
      position: absolute;
      // padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 378px;
      right: 0px;
      bottom: -20px;
      height: 87px;
      background: url('../../assets/images/d_right.png') no-repeat center;

      span {
        font-size: 22px;
        text-shadow: 0 1px 6px rgb(255 255 255 / 100%);
        font-weight: 300;
      }
    }

    .back_top {
      width: 30%;
      background: url('../../assets/images/bitext.png') no-repeat 34px 13px;
      // background-image: url('../../assets/images/bi_back.png');
    }
  }

  .bi_topstatus {
    width: 100%;
    margin-top: 10px;
    height: 10vh;
    background: url('../../assets/images/bipre.png') no-repeat center;
    background-size: cover;
    padding: 0px 10px 0px 40px;
    position: relative;
    display: flex;
    align-items: center;

    /* 大盒子背景色 */
    .box {
      width: 100%;

      p {
        font-size: 20px;
        margin: 0px 0px 5px 0px;

      }

      // @-webkit-keyframes rotate {
      //   from {
      //     transform: rotate(0deg);
      //   }

      //   to {
      //     transform: rotate(360deg);
      //   }
      // }

      // @keyframes rotate {
      //   from {
      //     transform: rotate(0deg);
      //   }

      //   to {
      //     transform: rotate(360deg);
      //   }
      // }
      /* 装所有item的盒子 设为渐变色 */
      .grid-content {
        display: flex;
        width: 67%;
        background-image: linear-gradient(to right, #FF3434, #FFD257, #34FFA7);
        float: left;
        // -webkit-animation: rotate 1.5s linear infinite;
        //   animation: rotate 1.5s linear infinite;

        /* 双数的item需要设置为与大盒子背景色一样，相当于没有双数item */
        .grid-two {
          background-color: #00103f;
        }

        /* 默认颜色为渐变色的背景色，永远不变，当比例数值没有到达40时，需要显示这个背景色 */
        .grid-reset {
          background-color: #0A285E;
        }

        .grid-item {
          width: 10px;
          height: 25px;
        }
      }

      @mixin bfspf() {
        font-weight: bold;
        position: absolute;
        right: 5%;
        bottom: 10%;
        font-size: 52px;
      }

      .bfbspan {
        color: #34FFA7;
        text-shadow: 0px -5px 8px #006CFF;
        @include bfspf();
      }

      .bfbspan_h {
        color: rgb(255, 207, 41);
        text-shadow: 0px -5px 8px rgba(255, 207, 41, 0.5);
        @include bfspf();
      }

      .bfbspan_er {
        color: rgb(255, 143, 68);
        text-shadow: 0px -5px 8px rgba(255, 143, 68, 0.5);
        @include bfspf();
      }
    }
  }

  .bi_status {
    @include statusg();
    // display: block;
    height: 38vh;
  }

  .bi_rightDivtop {
    @include statusg();
    height: 52.8vh;

  }

  .bi_rightDivbtm {
    @include statusg();
    height: 34vh;
  }

  .bi_CenterDiv {
    @include statusg();
    height: 89vh;
    position: relative;
    top: -1vh;
  }
}